<!DOCTYPE html>
<html>

<head>
  <title>WebClip</title>
  <link rel="stylesheet" href="webclip.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/github.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
  <script src="webclip.min.js"></script>

  <style>
    body{
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
      -moz-font-feature-settings: "liga" on;
    }
    header {
      padding-top: 8em;
      text-align: center;
    }
    
    header h1{
      font-size: 4em;
      font-weight: lighter;
    }
    
    header h3{
      font-weight: normal;
      margin-bottom: 2em;
    }
    
    a{
      color: rgba(0, 0, 0, .3);
      transition: .2s all;
    }
    
    a:hover{
      color: rgba(0, 0, 0, 1);      
    }
    
    .site-width {
      width: 1280px;
      margin: 0 auto;
    }
    
    code {
      border-radius: 0;
    }
    
    blockquote{
      margin-left: 0;
      padding-left: 1em;
      border-left: 4px solid gray;
    }
    
    section {
      margin-top: 2em !important;
    }
    
    .demo {
      padding: 1.6em;
      padding-top: 0;
    }
    
    .demo p{
      line-height: 1.8em;
    }
    
    .center {
      text-align: center;
    }
    
    footer{
      text-align: center;
      margin: 1em;
    }
  </style>
</head>

<body>
  <a href="https://github.com/djyde/WebClip" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
  <header>
    <h1>WebClip</h1>
    <h3>Plugable popup in browser. Inspired by <a href="https://pilotmoon.com/popclip" target="_blank">PopClip</a> and <a href="https://medium.com" target="_blank">Medium</a></h3>
    <code class="bash">$ npm install webclip</code>
  </header>
    <section class="site-width">
      <div class="pure-g">
        <div class="pure-u-2-3">
          <h3>Basic Usage</h3>
          <pre><code class="javascript">
  import WebClip from 'webclip'
  let webclip = new WebClip(document.querySelector('#your-container'))

  const google = {
    name: 'Google',
    description: 'Search on Google',
    action(value) {
      // `value` is the selected content
      window.open(`https://www.google.com.hk/#safe=strict&q=${value}`)
    }
  }
  
  const bing = {
    name: 'Bing',
    description: 'Search on Bing',
    action(value) {
      window.open(`http://bing.com/search?q=${value}`)
    }
  }

  webclip.use([google, bing])
        </code></pre>

        </div>
        <div class="pure-u-1-3">
          <div class="demo">
            <h3>Demo</h3>
            <div id="usage-demo">
              <p>You must be shapeless, formless, like water. When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle. When you pour water in a teapot, it becomes the teapot. Water can drip and it can crash. Become like water my friend.</p>
              <blockquote>
                <p>Bruce Lee</p>
              </blockquote>
          </div>
        </div>
      </div>
    </section>

    <section class="site-width pure-g">
      <div class="pure-u-2-3">
        <h3>Use the Range</h3>
        <p>WebClip will pass the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" target="_blank">Range</a>          in <code>action()</code>. You can use it to do a lot, such as wrapping a highlight wrapper.</p>
        <pre><code>
  const highlight = {
    name: 'highlight',
    description: 'Highlight content',
    action(value, range) {
      const $highlight = document.createElement('span')
      $highlight.style.backgroundColor = 'rgba(92,255,160,.5)'
      // or just add a class
      // $highlight.classList.add('your-class')
      range.surroundContents($highlight)      
    }
  }
  
  webclip.use([highlight, google, bing])
        </code></pre>
      </div>

      <div class="pure-u-1-3">
        <div class="demo">
          <h3>Demo</h3>
          <div id="range-demo">
            <p>I went to the woods because I wished to live deliberately, to front only the essential facts of life, and see
              if I could not learn what it had to teach, and not, when I came to die, discover that I had not lived.</p>
            <blockquote>
              <p>Henry David Thoreau</p>
            </blockquote>
          </div>
        </div>

      </div>

      </div>
    </section>
    
    <section class="site-width pure-g">
      <div class="pure-u-2-3">
        <h3>Plugin icon</h3>
        <p>You can config a <a href="http://fontawesome.io" target="_blank">font-awesome</a> icon for a plugin, instead of the uppercase-first-character</p>
        <pre><code>
  const highlight = {
    name: 'highlight',
    description: 'Highlight content',
    icon: 'pencil',
    action(value, range) {
      const $highlight = document.createElement('span')
      $highlight.style.backgroundColor = 'rgba(92,255,160,.5)'
      // or just add a class
      // $highlight.classList.add('your-class')
      range.surroundContents($highlight)      
    }
  }
  
  const remove = {
    name: 'remove',
    description: 'Remove content',
    icon: 'trash',
    action(value, range) {
      range.deleteContents()
    }
  }
  
  webclip.use([highlight, remove, google, bing])
        </code></pre>
      </div>

      <div class="pure-u-1-3">
        <div class="demo">
          <h3>Demo</h3>
          <div id="icon-demo">
            <p>All that city. You just couldn't see the end to it. The end? Please? You please just show me where it ends? It was all very fine on that gangway. And I was grand too, in my overcoat. I cut quite a figure. And I was getting off. Guaranteed. There was no problem. It wasn't what I saw that stopped me, Max. It was what I didn't see. You understand that? What I didn't see. In all that sprawling city there was everything except an end. There was no end. What I did not see was where the whole thing came to an end. The end of the world...</p>
            <blockquote>
              <i>The Legend of 1900</i>
            </blockquote>
          </div>
        </div>

      </div>

      </div>
    </section>


    <script>
      var google = {
      name: 'Google',
      description: 'Search on Google',
      action: function(value) {
        window.open('https://www.google.com.hk/#safe=strict&q=' + value)
      }
    }
    var bing = {
      name: 'Bing',
      description: 'Search on Bing',
      action: function(value) {
        window.open('http://bing.com/search?q='+ value)
      }
    }
    var highlight = {
      name: 'highlight',
      description: 'Highlight content',
      action: function(value, range) {
        var $highlight = document.createElement('span')
        $highlight.style.backgroundColor = 'rgba(92,255,160,.5)'
        range.surroundContents($highlight)
      }
    }
    var highlightWithIcon = {
      name: 'highlight',
      description: 'Highlight content',
      icon: 'pencil',
      action: function(value, range) {
        var $highlight = document.createElement('span')
        $highlight.style.backgroundColor = 'rgba(92,255,160,.5)'
        range.surroundContents($highlight)
      }
    }
    var remove = {
      name: 'remove',
      description: 'Remove content',
      icon: 'trash',
      action: function(value, range) {
        range.deleteContents()
      }
    }
    
    var usageClip = new WebClip(document.querySelector('#usage-demo'))
    var rangeClip = new WebClip(document.querySelector('#range-demo'))
    var iconClip = new WebClip(document.querySelector('#icon-demo'))
    
    
    usageClip.use([google, bing])
    rangeClip.use([highlight, google, bing])
    iconClip.use([highlightWithIcon, remove, google, bing])
    
    </script>
    
    <footer>
      Made with ♥ by <a href="https://github.com/djyde">Randy</a>
    </footer>
    
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-57278918-2', 'auto');
  ga('send', 'pageview');

</script>
</body>

</html>